<template>
	<view class="container">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">班级管理</block>
		</cu-custom>
		<!-- 滚动区域 -->
		<view class="scroll-panel" id="scroll-panel">
			<view class="list-box">
				<view class="main">
					<scroll-view scroll-y="true" :style="{ 'height':fullHeight-45 + 'px' }" @scroll="mainScroll" :scroll-into-view="scrollInto"
					 scroll-with-animation="true">
						<view class="item main-item" v-for="(item,index) in gradeList" :key="index" :id="'item-'+index">
							<view class="title">
								<text>{{item.name}}</text>
							</view>
							<view class="menu-container" :class="(item.children && item.children.length == 0) ? 'menu-container_nobottom' :''">
								<view class="menu-item" v-for="(item2,index2) in item.children" :key="index2">
									<view>
										<view class="describe">{{item2.name}}</view>
										<view class="money">{{item2.mainTeacher}}</view>
									</view>
								</view>
								<view v-if="item.children && item.children.length == 0" class="menu-empty">
									暂无数据
								</view>
							</view>
						</view>
						<!-- <view class="fill-last" :style="{ 'height':fillHeight + 'px' }"></view> -->
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {},
		data() {
			return {
				scrollHeight: 400,
				scrollTopSize: 0,
				fullHeight: 0, // 填充高度，用于最后一项低于滚动区域时使用
				mainArray: [],
				topArr: [],
				leftIndex: 0,
				scrollInto: '',
				gradeList: [],
			}
		},
		mounted() {
			this.fullHeight = `${document.documentElement.clientHeight}`; //默认值
			const that = this
			window.onresize = () => {
				return (() => {
					window.fullHeight = document.documentElement.clientHeight
					that.fullHeight = window.fullHeight
				})()
			}

			/* 等待DOM挂载完成 */
			this.$nextTick(() => {
				/* 在非H5平台，nextTick回调后有概率获取到错误的元素高度，则添加200ms的延迟来减少BUG的产生 */
				setTimeout(() => {
					/* 等待滚动区域初始化完成 */
					this.initScrollView().then(() => {
						/* 获取列表数据，你的代码从此处开始 */
						this.getListData();
					})
				}, 200);
			})
		},
		watch: {
			// 如果 `fullHeight ` 发生改变，这个函数就会运行 
			fullHeight: function(val) {
				if (!this.timer) {
					this.fullHeight = val
					console.log(val)
					this.timer = true
					let that = this
					setTimeout(function() { //频繁触发 resize 函数，会导致页面很卡
						that.timer = false
					}, 100)
				}
			}
		},
		methods: {
			/* 初始化滚动区域 */
			initScrollView() {
				return new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().select('#scroll-panel');
					view.boundingClientRect(res => {
						this.scrollTopSize = res.top;
						this.scrollHeight = res.height;
						this.$nextTick(() => {
							resolve();
						})
					}).exec();
				});
			},

			/* 获取列表数据 */
			getListData() {
				//查询任课班级
				this.$api.selectClassOfLoginTeacher().then((res) => {
					this.loading = false;
					console.log('request success' + res)
					this.gradeList = res;
				
				
				}).catch((err) => {
					console.log('request fail', err);
				})
				//查询年级树
				this.$api.findGradeTreeList().then((res) => {
					this.loading = false;
					console.log('request success' + res)
					this.gradeList = res;


				}).catch((err) => {
					console.log('request fail', err);
				})
				// Promise 为 ES6 新增的API ，有疑问的请自行学习该方法的使用。
				new Promise((resolve, reject) => {
					/* 因无真实数据，当前方法模拟数据。正式项目中将此处替换为 数据请求即可 */
					uni.showLoading();
					setTimeout(() => {
						let main = [];
						for (let i = 0; i < 15; i++) {
							let list = [];
							let r = Math.floor(Math.random() * 10);
							r = r < 1 ? 3 : r;
							for (let j = 0; j < r; j++) {
								list.push(j);
							}
							main.push({
								title: `第${i+1}类商品标题`,
								list
							})
						}
						// 将请求接口返回的数据传递给 Promise 对象的 then 函数。
						resolve({
							main
						});
					}, 1000);
				}).then((res) => {
					console.log('-----------请求接口返回数据示例-------------');
					console.log(res);

					uni.hideLoading();
					this.leftArray = res.left;
					this.mainArray = res.main;

					// DOM 挂载后 再调用 getElementTop 获取高度的方法。
					this.$nextTick(() => {
						this.getElementTop();
					});
				});
			},
			/* 获取元素顶部信息 */
			getElementTop() {
				new Promise((resolve, reject) => {
					let view = uni.createSelectorQuery().selectAll('.main-item');
					view.boundingClientRect(data => {
						resolve(data);
					}).exec();
				}).then((res) => {
					let topArr = res.map((item) => {
						return item.top - this.scrollTopSize; /* 减去滚动容器距离顶部的距离 */
					});
					this.topArr = topArr;

					/* 获取最后一项的高度，设置填充高度。判断和填充时做了 +-20 的操作，是为了滚动时更好的定位 */
					let last = res[res.length - 1].height;
					if (last - 20 < this.scrollHeight) {
						// this.fullHeight = this.scrollHeight - last + 20;
					}
				});
			},
			/* 主区域滚动监听 */
			mainScroll(e) {
				let top = e.detail.scrollTop;
				let index = 0;
				/* 查找当前滚动距离 */
				for (let i = (this.topArr.length - 1); i >= 0; i--) {
					/* 在部分安卓设备上，因手机逻辑分辨率与px单位计算不是整数，滚动距离与有误差，增加2px来完善该问题 */
					if ((top + 2) >= this.topArr[i]) {
						index = i;
						break;
					}
				}
				this.leftIndex = (index < 0 ? 0 : index);
			},
		}
	}
</script>

<style lang="scss">
	page,
	.container {
		height: 100%;
	}

	/* 容器 */
	.container {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;

		&>view {
			width: 100%;
		}

	}

	.scroll-panel {
		flex-grow: 1;
		height: 0;
		overflow: hidden;
	}

	.bottom-panel {
		padding-bottom: 0;
		// padding-bottom: constant(safe-area-inset-bottom);  
		// padding-bottom: env(safe-area-inset-bottom);		
	}

	.list-box {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: flex-start;
		align-content: flex-start;
		font-size: 14px;

		.main {
			// background-color: #fff;
			// padding-left: 10px;
			// width: 0;
			flex-grow: 1;
			box-sizing: border-box;

			.title {
				padding-left: 20px;
				line-height: 40px;
				font-size: 16px;
				font-weight: bold;
				color: #666;
				// width: 100%;
				// text-align: center;
				background-color: #FFFFFF;
				position: sticky;
				top: 0;
				z-index: 19;
				
				border-bottom: 0.5px solid #B2B2B2;
			}

			.item {
				border-bottom: #eee solid 1px;
			}

			.menu-container {
				padding-bottom: 7px;
				padding-left: 7px;
				display: flex;
				flex-wrap: wrap;
				/* justify-content: space-between; */
				flex-direction: row;
				background-color: #F1F1F1;

				.menu-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: calc(33.33% - 10px);
					height: 60px;
					font-size: 15px;
					text-align: center;
					background-color: #9370DB;
					border: 1px solid #8A2BE2;
					margin-top: 7px;
					margin-right: 7px;
					border-radius: 5px;
					.describe {
						font-size: 15px;
						color: #FFFFFF;
					}
					.money {
						font-size: 12px;
						color: #FFFFFF;
					}
				}
				.menu-item:active {
					background-color: #7B68EE;
				}
				.menu-empty {
					display: flex;
					/* justify-content: space-between; */
					flex-direction: row;
					justify-content: center;
					align-items: center;
					font-size: 15px;
					width: 100%;
					height: 40px;
					margin: 12px 10px;
					background-color: #FFFFFF;
					border-radius: 5px;
					border: 0.5px solid #B2B2B2;
				}
			}
			.menu-container_nobottom{
				padding-bottom: 0px;
			}

		}
	}
</style>
